<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="loginPage"
      :class="['w100','h100','flex','justify-content-center','align-item-center',{'background-image':`url(${backgroundImg})`}]"
    >
      <div class="login-box" :class="['login-box-style']">
        <div class="box-conts">
          <h1
            :style='{"font-size":"20px","font-weight":"500","color":"rgb(33, 37, 41)","margin-bottom":"24px"}'
          >
            {{title}}
          </h1>
          <form>
            <div :class='["flex","align-item-center"]'>
              {{usernameTitle}}<input
                type="text"
                placeholder="请输入您的账号"
                v-model="username"
                :class='["inp-box","inp","flex"]'
              />
            </div>
            <div :class='["flex","align-item-center"]'>
              {{passwordTitle}}<input
                type="password"
                placeholder="请输入您的密码"
                v-model="password"
                :class='["inp-box","inp","flex"]'
              />
            </div>
            <div>
              <button type="button" v-on:click="loginAccount">登录</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="./utils/vue/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#loginPage",
        data: {
          title: "成都市龙泉驿区北泉路社区社区医院医生管理系统",
          usernameTitle: "账号：",
          username: "",
          passwordTitle: "密码：",
          password: "",
          backgroundImg:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2021-03-11%2Fe6853cd7f015f1a052b8f4996cb15da5%2Fonline%2F8f85303db5b515100c6a8dfd53f1a8d0.jpg%3Fx-oss-process%3Dstyle%2Fresize_w_720&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667037129&t=9e872eba229ae6cea78756cd1fca5f5f",
          clear: "clear",
        },
        methods: {
          loginAccount() {
            let username = this.username;
            let password = this.password;
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
              if (xhr.readyState === 4 && xhr.status === 200) {
                let res = JSON.parse(xhr.responseText);
                if (res.code === 0) {
                  location.href = "/html/access.html";
                } else {
                  console.log(`res`, res);
                }
              }
            };
            xhr.open("post", "/login", true);
            xhr.setRequestHeader(
              "Content-type",
              "application/x-www-form-urlencoded"
            );
            xhr.send(`username=${username}&password=${password}`);
          },
        },
      });
    </script>
  </body>
</html>
